<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lift="http://liftweb.net/">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title class="lift:Menu.title">COLLABORATIVE IDE</title>
	

    <link rel="stylesheet" type="text/css" href="/css/codemirror.css"/>
	<link rel="stylesheet" type="text/css" href="/css/modaldbox.css"/>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
	
        <!-- CSS for the file list -->
	<link rel="stylesheet" type="text/css" href="/filelist-template/css/filelist-template.css"/>

	<!-- <link rel="stylesheet" type="text/css" href="mode/clike/clike.css"/> -->
	<style type="text/css"> 
	.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
	.activeline {background: #fff !important;}
	</style>
	<style type="text/css">
/* <![CDATA[ */
.edit_error_class {
  display: block;
  color: red;
}

.userMenu{
	float:right;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-right: 70px;
	margin-top: 7px;
}


.userMenu li{
	float:right;
	margin-right:10px;
	/* position:relative; */
	display:block;
}
.userMenu li a{
	display:block;
	padding:0px;
	color:#fff;
	text-decoration:none;
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
}


.userMenu li a:hover{
	color: rgb(191, 187, 136);
}

#userMenuID{
	margin-top:0px;
}

/************/


.userMenu {

	z-index: 999;
	float:right;
	width:100%;
	list-style:none;
	font-weight:bold;
	margin-right: 70px;
	margin-top: 7px;
	font: 15px/18px Tahoma Neue,Helvetica,Arial,sans-serif !important;
	height: 171px;


}

.userMenu ul{
	right:5000px;
	list-style:none;
	position:absolute;
	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
	background-image: -webkit-gradient(
    	linear,
    	left bottom,
    	left top,
    	color-stop(0, rgba(156,156,156, 0.9)),
    	color-stop(0.51, rgba(86,89,88, 0.9)),
    	color-stop(0.76, rgba(59,58,59, 0.9))
	);
	background-image: -moz-linear-gradient(
    	center bottom,
    	rgba(130,130,130, 0.9) 0%,
    	rgba(86,89,88,0.9) 51%,
    	rgba(54,56,56,0.9) 76%
	);
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	height: 171px;
		z-index: 600;
	
	
}
.userMenu ul li{
	padding-top:14px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	
	
	
}
.userMenu ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	display:block;
}
.userMenu li:hover ul{ /* Display the dropdown on hover */
	right:0; /* Bring back on-screen when needed */
	opacity:1; /* Fade to opaque */
}
.userMenu li:hover a{ /* Set styles for top level when dropdown is hovered */


	/*background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.05, rgb(59,58,59)),
	    color-stop(0.48, rgb(102,102,102)),
	    color-stop(0.88, rgb(156,156,156))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(59,58,59) 5%,
	    rgb(102,102,102) 48%,
	    rgb(156,156,156) 88%
	);*/
	
}
.userMenu li:hover ul a{ /* Override some top level styles when dropdown is hovered */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
.userMenu li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
	

	
	-moz-transform:scale(1.05);
	-webkit-transform:scale(1.05);
}



  /* ]]> */
  </style>

	<!-- /CSS -->
	
	<!-- SCRIPTS -->
	<!--projectHTML(myId: Long)-->
	
	<script type="text/javascript" src="http://usiedit.appspot.com/static/lib/codemirror.js"></script>	
	<script type="text/javascript" src="http://usiedit.appspot.com/static/lib/modaldbox.js"></script>
	<script type="text/javascript" src="/classpath/jquery.js"></script>
	<SCRIPT SRC="http://usiedit.appspot.com/static/lib/diff_match_patch_uncompressed.js"></SCRIPT>
	<SCRIPT SRC="http://usiedit.appspot.com/static/lib/mobwrite_core.js"></SCRIPT>
	<script src="http://usiedit.appspot.com/static/lib/simple_differ.js"></script>
	<script src="http://usiedit.appspot.com/static/lib/mobwrite_codemirror.js"></script>
	
	<script src="http://usiedit.appspot.com/static/compressed_form.js"></script>
	<script>
	  mobwrite.syncGateway = 'http://usiedit.appspot.com/scripts/q.py';
	</script>
	
	<script type="text/javascript">
		var filename;
		function getURL() {
			var strHref = window.location.href;
			var url = strHref.split('/');
			window.filename = url.pop();
		}
	</script>
	
	<script type="text/javascript" charset="utf-8">
	window.onresize = height_size;
	
	function height_size() {
		var table_height = window.innerHeight - 34;
		var editor_height = window.innerHeight - 140;
		var log_height = table_height - editor_height - 5;
		var main_table = document.getElementById('main_table');
		var editor = document.getElementById(filename);
		var log = document.getElementById('log');
		main_table.style.height = table_height + 'px';
		editor.style.height = editor_height + 'px';
		log.style.height = log_height + 'px';
	}
	
		function editor_text() {
			// var demo_editor_text = mobwrite.shareCodeMirror.create(filename, {
			// 		    height: '100%',
			// 		    width: '100%',
			// 		    parserfile: ['tokenizejavascript.js', 'parsejavascript.js'],
			// 		    path: 'http://usiedit.appspot.com/static/lib/',
			// stylesheet: 'http://usiedit.appspot.com/static/lib/jscolors.css',
			// 		    tabMode: 'shift',
			// 		    autoMatchParens: true
			// 		  });
		}
	
		
	 </script>
	
	
	
	<script type="text/javascript">

	
	function sidebar(side) {
		
		
		if(side == 'left') {
			
			if(left.value == 'true') {
				
				left.style.display = 'none';
				
				if(right.value == 'true') {
					codearea.style.width = '90%';
				} else {
					codearea.style.width = '100%';
				}
				
				left.value = 'false';
				left_button.value = 'Show Project Browser';
				
			} else {
				
				left.style.display = 'inline';
				
				if(right.value == 'true') {
					codearea.style.width = '80%';
				} else {
					codearea.style.width = '90%';
				}
				
				left.value = 'true';
				left_button.value = 'Hide Project Browser';
				
			}
		} else {
			
			if(right.value == 'true') {
				
				right.style.display = 'none';
				
				if(left.value == 'true') {
					codearea.style.width = '90%';
				} else {
					codearea.style.width = '100%';
				}
				
				right.value = 'false';
				right_button.value = 'Show Chat';
				
			} else {
				
				right.style.display = 'inline';
				
				if(left.value == 'true') {
					codearea.style.width = '80%';
				} else {
					codearea.style.width = '90%';
				}
				
				right.value = 'true';
				right_button.value = 'Hide Chat';	
			}
		}
	}

	</script>
		
  </head>

<!-- INSERIRE IL NOME DEL FILE -->
<!-- <body onload="var name = getURL(); "> -->
	<body onload="assign_value(); getURL(); height_size(); mobwrite.share(filename); editor_text();" style="overflow:hidden;">
		
		<div style="width: 200px; float:right;">
			<ul class="userMenu">
				<li>
					<a href="#">Menu</a>
					<span  class="userMenu"><lift:Menu.builder></lift:Menu.builder></span>
				</li>
			</ul>
		</div>
		
	<!-- body -->

		<div id="top_menu">
			<ul>

			</ul>
			
		</div>
		
	
        <div id="content">The main content will get bound here</div>

		<script type="text/javascript" charset="utf-8">
			var codearea = document.getElementById('codearea');
			var left = document.getElementById('left_sidebar');
			var right = document.getElementById('right_sidebar');
			var left_button = document.getElementById('left_button');
			var right_button = document.getElementById('right_button');
			left.value = 'true';
			right.value = 'true';
		</script>
		
		<script type="text/javascript" charset="utf-8">
				// TO CREATE AN INSTANCE
				// select the tree container using jQuery
				$('#demo1').jstree({
						'types' : {
							'valid_children' : [ 'file' ],
							'types' : {
								'file' : {
									'icon' : { 
										'image' : 'img/file.gif'
									},
									'valid_children' : [ 'default' ],
									'max_depth' : -1,
									'hover_node' : false,
									'max_children' : 0,
									'select_node' : function () {return false;}
								},
								'default' : {
									'valid_children' : [ 'default' ]
								}
							}
						},
						'plugins' : ['themes','html_data','ui','crrm','hotkeys', 'contextmenu', 'types'],
					})
					.bind('loaded.jstree', function (event, data) {
					});
				// INSTANCES
				// 1) you can call most functions just by selecting the container and calling `.jstree('func',`
				setTimeout(function () { $('#demo1').jstree('set_focus'); }, 500);
				// with the methods below you can call even private functions (prefixed with `_`)
				// 2) you can get the focused instance using `$.jstree._focused()`. 
				setTimeout(function () { $.jstree._focused().select_node('#phtml_1'); }, 1000);
				// 3) you can use $.jstree._reference - just pass the container, a node inside it, or a selector
				setTimeout(function () { $.jstree._reference('#phtml_1').close_node('#phtml_1'); }, 1500);
				// 4) when you are working with an event you can use a shortcut
				$('#demo1').bind('open_node.jstree', function (e, data) {
					// data.inst is the instance which triggered this event
					data.inst.select_node('#phtml_2', true);
				});
				setTimeout(function () { $.jstree._reference('#phtml_1').open_node('#phtml_1'); }, 2500);
		</script>

  </body>
</html>
